<template>
  <!--机构管理  -->
  <div style="height: 100%">
    <el-container>
      <el-main>
        <el-tabs type="border-card">
          <el-tab-pane label="机构列表">
            <el-card>
              <el-form ref="formRef" :model="roleForm" label-width="100px">
                <el-row :gutter="15">
                  <el-col :span="8">
                    <el-form-item label="机构名称" prop="username">
                      <el-input
                        v-model="roleForm.username"
                        placeholder="请输入机构名称"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="primary" icon="search">搜索</el-button>
                    <el-button icon="refresh" @click="resetForm">重置</el-button>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>
            <el-card style="margin-top: 15px">
              <div class="toolbar" style="margin-bottom: 15px">
                <el-button type="primary" icon="plus" @click="btnUnitDialog">新增</el-button>
              </div>
              <el-table :data="userList" border>
                <el-table-column align="center" type="selection" />
                <el-table-column label="用户姓名" prop="name" align="center" />
                <el-table-column label="组织编码" prop="code" align="center" />
                <el-table-column label="组织层级编码" prop="codeseq" align="center" />
                <el-table-column label="联系人" prop="contact" align="center" />
                <el-table-column label="地址" prop="address" align="center" />
                <el-table-column label="邮箱" prop="email" align="center" />
                <!-- <el-table-column label="上级组织ID" prop="parentId" align="center" /> -->
                <el-table-column label="有无下级组织" prop="hasChildren" align="center">
                  <template #default="{ row }">
                    <el-tag v-if="row.hasChildren == 0">有</el-tag>
                    <el-tag v-if="row.hasChildren == 1">无</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="是否系统内置" prop="isSystem" align="center">
                  <template #default="{ row }">
                    <el-tag v-if="row.isSystem == 0">否</el-tag>
                    <el-tag v-if="row.isSystem == 1">是</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="是否启用" prop="enabled" align="center">
                  <template #default="{ row }">
                    <el-tag v-if="row.enabled == 0">否</el-tag>
                    <el-tag v-if="row.enabled == 1">是</el-tag>
                  </template>
                </el-table-column>
                <!-- <el-table-column label="负责人ID" prop="leaderId" align="center" /> -->
                <el-table-column label="操作" fixed="right">
                  <template #default="{ row }">
                    <div class="sys-table-main-actions">
                      <el-link
                        icon="edit"
                        :underline="false"
                        type="primary"
                        @click="btnUnitDialog(row.id)"
                        >编辑</el-link
                      >
                      <el-link
                        icon="delete"
                        :underline="false"
                        type="danger"
                        style="margin: 0 15px"
                        @click="del(row.id)"
                        >删除</el-link
                      >
                      <el-link icon="Refresh" :underline="false" type="success">重置密码</el-link>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                :total="totals"
                @update:current-page="handleCurrentPageUpdate"
                @update:page-size="handlePageSizeUpdate"
              ></pagination>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="回收站">回收站</el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
    <unitDialog
      v-if="dialogVisible"
      v-model:dialogVisible="dialogVisible"
      :unit-update-id="unitUpdateId"
      @user-change="getUnit"
    ></unitDialog>
  </div>
</template>

<script setup lang="ts">
import {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  ref,
  reactive,
  onBeforeMount,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs
} from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'

import { unitPage, unitDel } from '@api/systemUnit'
import { Record } from '@interface/systemUnit'
import unitDialog from './unitDialog.vue'
const state = reactive({
  roleForm: {
    current: 1,
    size: 10,
    username: '',
    realName: '',
    email: '',
    phone: '',
    gender: '',
    enabled: '',
    unitId: ''
  },
  userList: [] as Record[],
  totals: 0
})

//控制dialog显示
const dialogVisible = ref<boolean>(false)
const unitUpdateId = ref('')
const { roleForm, userList, totals } = toRefs(state)

onBeforeMount(() => {
  const { proxy } = getCurrentInstance() as ComponentInternalInstance
  if (proxy) {
    ;(proxy as any).getDicts(['system_global_status', 'system_global_gender'])
  }
  getUnit()
})

const getUnit = async () => {
  const res = await unitPage(roleForm.value)
  const { records, total } = res.data
  totals.value = total
  userList.value = records
}

//分页-页码
const handleCurrentPageUpdate = (page: number) => {
  roleForm.value.current = page
  getUnit()
}
//分页-一页显示多少条
const handlePageSizeUpdate = (page: number) => {
  roleForm.value.size = page
  getUnit()
}

//新增|编辑
const btnUnitDialog = (id: string) => {
  if (typeof id == 'string') {
    unitUpdateId.value = id
  } else {
    unitUpdateId.value = ''
  }
  dialogVisible.value = true
}

const del = (id: string) => {
  ElMessageBox.confirm('是否删除角色', {
    type: 'error',
    confirmButtonText: '删除',
    cancelButtonText: '取消'
  })
    .then(async () => {
      const res = await unitDel(id)
      if (res.code != '200') return
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
      getUnit()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      })
    })
}
//重置
const resetForm = () => {
  roleForm.value = {
    current: 1,
    size: 10,
    username: '',
    realName: '',
    email: '',
    phone: '',
    gender: '',
    enabled: '',
    unitId: ''
  }
  getUnit()
}
</script>
